<template>
  <!-- 在最外面套了一层容器 设置好内外边距  但到某一页显示效果还是有问题 -->
  <div class="containerCons"> 
    <div class="card" :style="{ transform: `scale(${scale})` }">
      <h3>{{ cards[currentCardIndex].question }}</h3>

      <div v-if="currentCardIndex === 0">
        <label for="age">您的年龄是？</label>
        <br><br><br>
        <input type="text" id="age" v-model="cards[currentCardIndex].answer" />
      </div>
      <div v-else-if="currentCardIndex === 1">
        <label for="gender">您的性别是？</label>
        <br><br><br>
        <div>
          <input type="radio" id="nan" value="男" v-model="cards[currentCardIndex].answer" />
          <label for="nan">男</label>
        </div>
        <div>
          <input type="radio" id="nv" value="女" v-model="cards[currentCardIndex].answer" />
          <label for="nv">女</label>
        </div>
      </div>

      <div v-else-if="currentCardIndex === 2">
        <label for="maritalStatus">您的婚姻状态是？</label>
        <br><br><br>
        <div>
          <input type="checkbox" id="married" value="已婚" v-model="cards[currentCardIndex].answer" />
          <label for="married">已婚</label>
        </div>
        <div>
          <input type="checkbox" id="unmarried" value="未婚" v-model="cards[currentCardIndex].answer" />
          <label for="unmarried">未婚</label>
        </div>
      </div>

      <div v-else-if="currentCardIndex === 3">
        <label for="occupation">您的职业是？</label>
        <br><br>
        <br>
        <div class="radio-option">
          <input type="radio" id="gongzhirenyuan" value="公职人员(含公务员，和除教师外的事业单位人员)"
            v-model="cards[currentCardIndex].answer" />
          <label for="gongzhirenyuan">公职人员(含公务员，和除教师外的事业单位人员)</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="jiaoshi" value="教师" v-model="cards[currentCardIndex].answer" />
          <label for="jiaoshi">教师</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="qiyeguanlirenyuan" value="企业管理人员" v-model="cards[currentCardIndex].answer" />
          <label for="qiyeguanlirenyuan">企业管理人员</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="gongren" value="工人" v-model="cards[currentCardIndex].answer" />
          <label for="gongren">工人</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="nongmin" value="农民" v-model="cards[currentCardIndex].answer" />
          <label for="nongmin">农民</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="getihu" value="个体户" v-model="cards[currentCardIndex].answer" />
          <label for="getihu">个体户</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="qita" value="其他" v-model="cards[currentCardIndex].answer" />
          <label for="qita">其他</label>
        </div>
      </div>

      <div v-else-if="currentCardIndex === 4">
        <label for="disease">您是否患有疾病？</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="cancer" value="癌症" v-model="cards[currentCardIndex].answer" />
          <label for="cancer">癌症</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="diabetes" value="糖尿病" v-model="cards[currentCardIndex].answer" />
          <label for="diabetes">糖尿病</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="huxi" value="慢性呼吸系统疾病" v-model="cards[currentCardIndex].answer" />
          <label for="huxi">慢性呼吸系统疾病</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="xueguan" value="心脑血管疾病" v-model="cards[currentCardIndex].answer" />
          <label for="xueguan">心脑血管疾病</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="none" value="无" v-model="cards[currentCardIndex].answer" />
          <label for="none">无</label>
        </div>

        <div class="radio-option">
          <input type="radio" id="other" value="其他" v-model="cards[currentCardIndex].answer" />
          <label for="other">其他</label>
          <br>
        </div>
        <div input type="radio" id="other" value="其他">
          <input type="text" id="otherDisease" v-model="cards[currentCardIndex].otherDisease" />
        </div>
        <br><br>
      </div>

      <div v-else-if="currentCardIndex === 5">
        <label for="yichuan">您是否有家人有过遗传疾病或患有特定疾病？</label>
        <br><br><br>
        <div>
          <input type="checkbox" id="you" value="有" v-model="cards[currentCardIndex].answer" />
          <label for="you">有</label>
        </div>
        <div>
          <input type="checkbox" id="wu" value="无" v-model="cards[currentCardIndex].answer" />
          <label for="wu">无</label>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 6">
        <label for="regularCheck">您是否定期进行健康检查？</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="regular" value="是的，定期进行健康检查" v-model="cards[currentCardIndex].answer" />
          <label for="regular">是的，定期进行健康检查</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="irregular" value="是的，但不是定期" v-model="cards[currentCardIndex].answer" />
          <label for="irregular">是的，但不是定期</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="never" value="否，从未进行过健康检查" v-model="cards[currentCardIndex].answer" />
          <label for="never">否，从未进行过健康检查</label>
        </div>
      </div>

      <div v-else-if="currentCardIndex === 7">
        <label for="insurance">您是否购买了其他保险？</label>
        <br><br>
        <div>
          <input type="radio" id="yes" value="是" v-model="cards[currentCardIndex].answer" />
          <label for="yes">是</label>
        </div>
        <div>
          <input type="radio" id="no" value="否" v-model="cards[currentCardIndex].answer" />
          <label for="no">否</label>
        </div>
        <br>       
        <label for="satisfaction">您对保险的满意程度如何？</label>
        <div>
          <button v-for="i in 5" :key="i"
            :style="{ backgroundColor: ['green', 'lightgreen', 'yellow', 'lightcoral', 'red'][i - 1] }"
            @click="insurance.satisfaction = i">{{ i }}</button>
        </div>
        <br>
        <label for="dissatisfaction">您对保险不满意的地方是什么？</label>        <br>
        <input type="text" id="dissatisfaction" v-model="cards[currentCardIndex].dissatisfaction" />
        <br><br>
      </div>

      <div v-else-if="currentCardIndex === 8">
        <label for="insuranceSatisfaction">您对以下保险的满意度如何？</label>
        <br><br><br>
        <div v-for="(insurance, index) in cards[currentCardIndex].insurances" :key="index">
          <label :for="'insurance' + index">{{ insurance.name }}</label>
          <div>
            <button v-for="i in 5" :key="i"
              :style="{ backgroundColor: ['green', 'lightgreen', 'yellow', 'lightcoral', 'red'][i - 1] }"
              @click="insurance.satisfaction = i">{{ i }}</button>
          </div>
        </div>
      </div>

      <div v-else-if="currentCardIndex === 9">
        <label for="insuranceDuration">您购买保险服务的期限长短更倾向于？</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="shortTerm" value="短期（1年及1年以下）" v-model="cards[currentCardIndex].answer" />
          <label for="shortTerm">短期（1年及1年以下）</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="longTerm" value="长期（1年以上或含有保证续保条款)" v-model="cards[currentCardIndex].answer" />
          <label for="longTerm">长期（1年以上或含有保证续保条款)</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="both" value="两者均可" v-model="cards[currentCardIndex].answer" />
          <label for="both">两者均可</label>
        </div>
        <br><br>
      </div>
      <div v-else-if="currentCardIndex === 10">
        <label for="insuranceAmount">您希望健康保险计划提供的保额范围为：</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="below500k" value="50万以下" v-model="cards[currentCardIndex].answer" />
          <label for="below500k">50万以下</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="500kTo1m" value="50万-100万" v-model="cards[currentCardIndex].answer" />
          <label for="500kTo1m">50万-100万</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="1mTo5m" value="100万-500万" v-model="cards[currentCardIndex].answer" />
          <label for="1mTo5m">100万-500万</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="above5m" value="500万以上" v-model="cards[currentCardIndex].answer" />
          <label for="above5m">500万以上</label>
        </div>
        <br><br>
      </div>
      <div v-else-if="currentCardIndex === 11">
        <label for="premiumExpectation">您的预期保费是：</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="below200" value="200元以下" v-model="cards[currentCardIndex].answer" />
          <label for="below200">200元以下</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="200to500" value="200元-500元" v-model="cards[currentCardIndex].answer" />
          <label for="200to500">200元-500元</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="above500" value="500元以上" v-model="cards[currentCardIndex].answer" />
          <label for="above500">500元以上</label>
        </div>
        <br>
        <label for="premiumPaymentMethod">您预期的保费交付方式是：</label>
        <br><br><br>
        <div class="radio-option">
          <input type="radio" id="installment" value="分期交费" v-model="cards[currentCardIndex].paymentMethod" />
          <label for="installment">分期交费</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="oneTime" value="一次性交费" v-model="cards[currentCardIndex].paymentMethod" />
          <label for="oneTime">一次性交费</label>
        </div>
        <div class="radio-option">
          <input type="radio" id="bothMethods" value="两者兼有" v-model="cards[currentCardIndex].paymentMethod" />
          <label for="bothMethods">两者兼有</label>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 12">
        <label for="insuranceFeatures">您希望健康保险产品具备哪些特点？（可以选择一个或多个选项）</label>
        <br><br><br>
        <div class="radio-option">
          <input type="checkbox" id="flexibleCoverage" value="灵活的保障范围和报销比例" v-model="cards[currentCardIndex].answer" />
          <label for="flexibleCoverage">灵活的保障范围和报销比例</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="nationwideHospitals" value="提供全国范围内的医院和诊所选择"
            v-model="cards[currentCardIndex].answer" />
          <label for="nationwideHospitals">提供全国范围内的医院和诊所选择</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="preventiveCare" value="包含预防和日常诊疗费用报销" v-model="cards[currentCardIndex].answer" />
          <label for="preventiveCare">包含预防和日常诊疗费用报销</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="emergencyServices" value="提供紧急救援和转诊服务" v-model="cards[currentCardIndex].answer" />
          <label for="emergencyServices">提供紧急救援和转诊服务</label>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 13">
        <label for="insuranceCompanyReputation">您对于保险公司的声誉和信誉度有多重视？</label>
        <br><br>
        <div>
          <button v-for="i in 5" :key="i"
            :style="{ backgroundColor: ['green', 'lightgreen', 'yellow', 'lightcoral', 'red'][i - 1] }"
            @click="insurance.satisfaction = i">{{ i }}</button>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 14">
        <label for="extraCoverage">您愿意为更全面的健康保险保障支付额外费用吗？</label>
        <br><br><br>
        <div>
          <input type="radio" id="yes" value="是" v-model="cards[currentCardIndex].answer" />
          <label for="yes">是</label>
        </div>
        <div>
          <input type="radio" id="no" value="否" v-model="cards[currentCardIndex].answer" />
          <label for="no">否</label>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 15">
        <label for="additionalServices">您希望健康保险产品提供哪些附加服务？（可以选择一个或多个选项）</label>
        <br><br><br>
        <div class="radio-option">
          <input type="checkbox" id="healthHotline" value="24小时健康咨询热线" v-model="cards[currentCardIndex].answer" />
          <label for="healthHotline">24小时健康咨询热线</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="healthManagement" value="健康管理和健康促进活动" v-model="cards[currentCardIndex].answer" />
          <label for="healthManagement">健康管理和健康促进活动</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="healthCheckup" value="健康检查和筛查服务" v-model="cards[currentCardIndex].answer" />
          <label for="healthCheckup">健康检查和筛查服务</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="counseling" value="提供心理咨询和辅导" v-model="cards[currentCardIndex].answer" />
          <label for="counseling">提供心理咨询和辅导</label>
        </div>
      </div>
      <div v-else-if="currentCardIndex === 16">
        <label for="claimServices">您希望健康保险产品提供的理赔服务包括：</label>
        <br><br><br>
        <div class="radio-option">
          <input type="checkbox" id="fastClaims" value="快速高效的理赔处理" v-model="cards[currentCardIndex].answer" />
          <label for="fastClaims">快速高效的理赔处理</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="claimGuidance" value="提供理赔咨询和指导" v-model="cards[currentCardIndex].answer" />
          <label for="claimGuidance">提供理赔咨询和指导</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="onlineTracking" value="理赔服务全程在线跟踪" v-model="cards[currentCardIndex].answer" />
          <label for="onlineTracking">理赔服务全程在线跟踪</label>
        </div>
        <div class="radio-option">
          <input type="checkbox" id="legalSupport" value="提供法律援助和维权支持" v-model="cards[currentCardIndex].answer" />
          <label for="legalSupport">提供法律援助和维权支持</label>
        </div>
        <br>
        <button @click="completeSurvey">完成</button>
      </div>

      <div v-else-if="currentCardIndex === 17">
  <table>
    <tbody>
      <tr v-for="(option, index) in cards[currentCardIndex].options" :key="index">
        <td>{{ option.split('-')[0] }}</td>
        <td>{{ option.split('-')[1] }}</td>
      </tr>
    </tbody>
  </table>
</div>

      <div v-else>
        <p>{{ cards[currentCardIndex].answer }}</p>
      </div>


      <button class="arrow-button left" @click="previousCard" v-if="currentCardIndex > 0 && currentCardIndex !== 17">
        <i class="arrow-icon arrow-icon-left"></i>
      </button>
      <button class="arrow-button right" @click="nextCard"
        v-if="currentCardIndex < cards.length - 1 && currentCardIndex !== 17 && currentCardIndex !== 16">
        <i class="arrow-icon"></i>
      </button>
    </div>

  </div>
</template>


<script>
import axios from 'axios';
export default {
  name: 'CardContainer',
  data() {
    return {
      currentCardIndex: 0,
      items: [],
      cards: [
        { question: '问题一', answer: '' },
        { question: '问题二', answer: '' },
        { question: '问题三', answer: [] },
        { question: '问题四', answer: '' },
        { question: '问题五', answer: '', otherDisease: '' },
        { question: '问题六', answer: [] },
        { question: '问题七', answer: [] },
        { question: '问题八', answer: '', satisfaction: 0, dissatisfaction: '' },
        {
          question: '问题九',
          insurances: [
            { name: '住院医疗费用报销', satisfaction: 0 },
            { name: '日常门诊诊疗费用报销', satisfaction: 0 },
            { name: '重疾保障', satisfaction: 0 },
            { name: '意外伤害保障', satisfaction: 0 },
            { name: '应对意外医疗费用', satisfaction: 0 },
            { name: '预防和日常诊疗费用报销', satisfaction: 0 },
            { name: '家庭经济保障', satisfaction: 0 },
            { name: '提供长期护理和康复服务', satisfaction: 0 },
            { name: '慢性病管理', satisfaction: 0 },
            { name: '特定药品费用', satisfaction: 0 }
          ]
        },
        { question: '问题十', answer: '' },
        { question: '问题十一', answer: '' },
        { question: '问题十二', answer: '', paymentMethod: '' },
        { question: '问题十三', answer: [] },
        { question: '问题十四', answer: '' },
        { question: '问题十五', answer: '' },
        { question: '问题十六', answer: [] },
        { question: '问题十七', answer: [] },
        {
          question: '我们为您提供的保险项目：',
          options: [] // 初始时为空，等待API返回数据
        },
      ],
      scale: 2
    };
  },
  methods: {
    nextCard() {
      if (this.currentCardIndex < this.cards.length - 1) {
        this.currentCardIndex++;
      }
    },
    previousCard() {
      if (this.currentCardIndex > 0) {
        this.currentCardIndex--;
      }
    },
    completeSurvey() {
      this.currentCardIndex = this.cards.length - 1;
    }
  },
  async created() {
    const response = await axios.get('https://api.insurabot.pro/RandomName');
    this.cards[this.cards.length - 1].options = response.data;
  },
};
</script>

<style scoped>
.containerCons{
  width:100%;
  padding: 10%;
  display: flex;
  align-items: center;
  margin: auto;
}
.card {
  margin: auto;
  /* margin-top: 25vh; */
  /* margin-bottom: 10%; */
  transform: translateY(-50%);
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* width: 700px; */
  width: 43%;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* display: block; */
}

.arrow-button {
  position: fixed;
  bottom: 20px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.arrow-button.left {
  left: 20px;
}

.arrow-button.right {
  right: 20px;
}

.arrow-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

.arrow-icon-left {
  transform: rotate(-135deg);
}

.radio-option {
  display: flex;
  align-items: flex-start;
  margin-left: 50%;
  transform: translateX(-50%);
}
table {
  width: 100%;
}
td {
  border-bottom: 1px solid #000;
}
</style>
